<template>
  <div class="today-window">
    <box title="今日窗口期">
      <div class="main">
        <div class="transportation">
          <div class="title">运输窗口期</div>
          <div class="time-wrap">
            <div class="time" v-if="data.windowPeriods.length">
              <p
                v-for="(l, i) in data.windowPeriods2"
                :key="`time${i}`"
                :class="{ 'len-is-2': data.windowPeriods2.length == 2 }"
              >
                {{ l.formattedTime }}
                <span v-if="l.isNextDay" class="is-next-day">(次日)</span>
              </p>
            </div>
            <div class="time" v-else>
              <p>-</p>
            </div>
          </div>
        </div>
        <div class="waterway">
          <img src="~@/assets/waterLevel/icon_zdsw.png" alt="" class="ic" />
          <p class="key">主航道最低水位</p>
          <p class="val">{{ data.lowestValue }}<span class="unit"> m</span></p>
        </div>
        <div class="waterway">
          <img src="~@/assets/waterLevel/icon_zgsw.png" alt="" class="ic" />
          <p class="key">主航道最高水位</p>
          <p class="val">{{ data.highesValue }}<span class="unit"> m</span></p>
        </div>
        <div class="sub-title">环境监测</div>
        <div class="msg">
          <div class="item">
            <p class="val">{{ weather.trends }}</p>
            <p class="key">环境风向</p>
          </div>
          <div class="item">
            <p class="val">{{ weather.speed }} <span class="unit">m/s</span></p>
            <p class="key">环境风速</p>
          </div>
          <div class="item">
            <p class="val">
              {{ weather.temp }}℃<!-- <span class="unit">多云</span> -->
            </p>
            <p class="key">环境温度</p>
          </div>
        </div>
      </div>
    </box>
  </div>
</template>
<script>
import box from "./box.vue";
import { api } from "@/api/index.js";
// import { getWeatherData } from "@/api/bridgeMonitoring/sensor";
const directions = [
  { code: "N", name: "北风", range: [0, 22.5] },
  { code: "N", name: "北风", range: [337.5, 360] },
  { code: "NE", name: "东北风", range: [22.5, 67.5] },
  { code: "E", name: "东风", range: [67.5, 112.5] },
  { code: "SE", name: "东南风", range: [112.5, 157.5] },
  { code: "S", name: "南风", range: [157.5, 202.5] },
  { code: "SW", name: "西南风", range: [202.5, 247.5] },
  { code: "W", name: "西风", range: [247.5, 292.5] },
  { code: "NW", name: "西北风", range: [292.5, 337.5] },
];
export default {
  components: { box },
  data() {
    return {
      projectCode: "QJDQ",
      data: {
        windowPeriods: [],
      },
      diffTime: "",
      directions,
      weather: {},
    };
  },
  mounted() {
    this.getBestTransPeriod();
    this.getWeatherData();
  },
  computed: {},
  methods: {
    async getBestTransPeriod() {
      const { projectCode } = this;
      const dateType = "0"; // 0-本日 1-未来5日
      const [data] = await api.getBestTransPeriod({ dateType, projectCode });
      const { windowPeriods } = data;
      data.windowPeriods2 = this.handleWindowPeriods(windowPeriods);
      console.log("本日窗口期", data);
      this.data = data;
    },
    async getWeatherData() {
      const { projectCode } = this;
      const sensorCodes = ["23061", "23060", "23062"];
      const [res] = await api.getWeatherData({ projectCode, sensorCodes });
      console.log('getWeatherData',res);
      const { data } = res;
      let [trends, speed, temp] = data;
      const trendsObj = directions.find((l) => {
        const { pointValue } = trends;
        return pointValue >= l.range[0] && pointValue < l.range[1];
      });
      const weather = {
        trends: trendsObj.name,
        speed: Math.round(speed.pointValue),
        temp: Math.round(temp.pointValue),
      };
      this.weather = weather;
      console.log("天气", res);
    },
    getdiffTime(timeRange) {
      // 提取起始时间和结束时间
      const [startTime, endTime] = timeRange.split(" - ");

      // 将起始时间和结束时间转换为小时
      const [startHour, startMinute] = startTime.split(":").map(Number);
      const [endHour, endMinute] = endTime.split(":").map(Number);

      const totalStartMinutes = startHour * 60 + startMinute;
      const totalEndMinutes = endHour * 60 + endMinute;

      // 计算时间差
      const timeDiffInMinutes = totalEndMinutes - totalStartMinutes;
      const timeDiffInHours = timeDiffInMinutes / 60;

      // 格式化时间差字符串
      this.diffTime = `${timeDiffInHours}h`;
    },
    handleWindowPeriods(windowPeriods) {
      const arr = [];
      windowPeriods.forEach((l) => {
        const times = l.split(" ~ ");
        const startTime = times[0].split(" ")[1];
        const endTime = times[1].split(" ")[1];

        // 判断是否跨越到第二天
        const isNextDay = startTime > endTime;

        // 格式化时间
        const formattedStartTime = startTime.substring(0, 5);
        const formattedEndTime = endTime.substring(0, 5);

        arr.push({
          formattedTime: `${formattedStartTime}-${formattedEndTime}`,
          isNextDay,
        });
      });
      return arr;
    },
  },
};
</script>
<style scoped lang='scss'>
.today-window {
  height: vh(520px);
  margin-bottom: vh(18px);
  .main {
    padding: 0 vw(20px);
    .transportation {
      border: 1px solid blue;
      height: vh(106px);
      width: vw(380px);
      height: vh(106px);
      border: 1px solid #0d5b70;
      margin-top: vh(13px);
      background: rgba(13, 109, 135, 0.2);
      .title {
        background-image: url("~@/assets/waterLevel/tt_bg.png");
        height: vh(32px);
        text-align: center;
        line-height: vh(32px);
        font-family: Source Han Sans CN;
        font-size: vh(18px);
        color: #dafdff;
        background-size: 100% 100%;
        margin-bottom: 0;
      }
      .time-wrap {
        .time {
          height: vh(73px);
          font-family: D-DIN-PRO;
          text-align: center;
          font-weight: bold;
          font-size: vh(36px);
          line-height: vh(73px);
          color: #ffe280;
          background: linear-gradient(0deg, #ffffff 0%, #ffe8a1 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          display: flex;
          justify-content: space-around;

          .len-is-2 {
            font-size: vh(30px);
          }
          .is-next-day {
            font-size: vh(20px);
          }
          p {
            margin: 0;
          }
        }
      }
    }
    .waterway {
      width: vw(380px);
      height: vh(84px);
      border: 1px solid #0d5b70;
      margin-top: vh(8px);
      padding-left: vw(32px);
      display: flex;
      align-items: center;
      background-image: url("~@/assets/waterLevel/bg_01.png");
      background-size: 100% 100%;

      .ic {
        height: vh(48px);
      }
      .key {
        margin-left: vw(33px);
        font-family: Source Han Sans CN;
        font-size: vh(20px);
        color: #b3b3b3;
      }
      .val {
        margin-left: vw(21px);
        font-family: D-DIN-PRO;
        font-weight: bold;
        font-size: vh(36px);
        color: #dafdff;
        .unit {
          font-size: vh(12px);
        }
      }
    }
    .sub-title {
      height: vh(20px);
      background: url("~@/assets/waterLevel/形状3619.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100%;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: vh(20px);
      color: #dafdff;
      margin-top: vh(23px);
      // display: flex;
      // align-items: center;
      text-align: center;
      line-height: vh(20px);
    }
    .msg {
      display: flex;
      justify-content: space-between;
      padding-top: vh(36px);
      padding-bottom: vh(25px);
      p {
        margin: 0;
      }
      .val {
        font-family: Source Han Sans CN;
        font-size: vh(20px);
        color: #dafdff;
        .unit {
          font-size: vh(14px);
        }
      }
      .key {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(16px);
        color: #ffffff;
        opacity: 0.6;
      }
    }
  }
}
</style>
